<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>Unify | Welcome...</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS Global Compulsory-->
    <link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css" tppabs="http://htmlstream.com/preview/unify/assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/style.css" tppabs="http://htmlstream.com/preview/unify/assets/css/style.css">
    <link rel="stylesheet" href="assets/css/headers/header1.css" tppabs="http://htmlstream.com/preview/unify/assets/css/headers/header1.css">
    <link rel="stylesheet" href="assets/css/responsive.css" tppabs="http://htmlstream.com/preview/unify/assets/css/responsive.css">
    <link rel="shortcut icon" href="favicon.ico">        
    <!-- CSS Implementing Plugins -->    
    <link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css" tppabs="http://htmlstream.com/preview/unify/assets/plugins/font-awesome/css/font-awesome.css">
    <!-- CSS Theme -->    
    <link rel="stylesheet" href="assets/css/themes/default.css" tppabs="http://htmlstream.com/preview/unify/assets/css/themes/default.css" id="style_color">
    <link rel="stylesheet" href="assets/css/themes/headers/default.css" tppabs="http://htmlstream.com/preview/unify/assets/css/themes/headers/default.css" id="style_color-header-1">    
</head> 

<body>
<!--=== Style Switcher ===-->    
<i class="style-switcher-btn icon-cogs hidden-xs"></i>
<div class="style-switcher">
    <div class="theme-close"><i class="icon-remove"></i></div>
    <div class="theme-heading">Theme Colors</div>
    <ul class="list-unstyled">
        <li class="theme-default theme-active" data-style="default" data-header="light"></li>
        <li class="theme-blue" data-style="blue" data-header="light"></li>
        <li class="theme-orange" data-style="orange" data-header="light"></li>
        <li class="theme-red" data-style="red" data-header="light"></li>
        <li class="theme-light last" data-style="light" data-header="light"></li>
    </ul>
    <div style="margin-bottom:18px;"></div>
    <div class="theme-heading">Layouts</div>
    <div class="text-center">
        <a href="#" class="btn-u btn-u-green btn-block active-switcher-btn wide-layout-btn">Wide</a>
        <a href="#" class="btn-u btn-u-green btn-block boxed-layout-btn">Boxed</a>
    </div>
</div><!--/style-switcher-->
<!--=== End Style Switcher ===-->    

<!--=== Top ===-->    
<div class="top">
    <div class="container">         
        <ul class="loginbar pull-right">
            <li>
                <i class="icon-globe"></i>
                <a>Languages</a>
                <ul class="lenguages">
                    <li class="active">
                        <a href="#">English <i class="icon-ok"></i></a> 
                    </li>
                    <li><a href="#">Spanish</a></li>
                    <li><a href="#">Russian</a></li>
                    <li><a href="#">German</a></li>
                </ul>
            </li>
            <li class="devider"></li>   
            <li><a href="page_faq.html" tppabs="http://htmlstream.com/preview/unify/page_faq.html">Help</a></li>  
            <li class="devider"></li>   
            <li><a href="page_login.html" tppabs="http://htmlstream.com/preview/unify/page_login.html">Login</a></li>   
        </ul>
    </div>      
</div><!--/top-->
<!--=== End Top ===-->    

<!--=== Header ===-->    
<div class="header">
    <div class="navbar navbar-default" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html" tppabs="http://htmlstream.com/preview/unify/index.html">
                    <img id="logo-header" src="assets/img/logo1-default.png" tppabs="http://htmlstream.com/preview/unify/assets/img/logo1-default.png" alt="Logo">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-responsive-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Home
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="index.html" tppabs="http://htmlstream.com/preview/unify/index.html">Option 1: Default Page</a></li>
                            <li><a href="page_home1.html" tppabs="http://htmlstream.com/preview/unify/page_home1.html">Option 2: Layer Slider</a></li>
                            <li><a href="page_home2.html" tppabs="http://htmlstream.com/preview/unify/page_home2.html">Option 3: Revolution Slider</a></li>
                            <li><a href="page_home3.html" tppabs="http://htmlstream.com/preview/unify/page_home3.html">Option 4: Amazing Content</a></li>
                            <li><a href="page_home4.html" tppabs="http://htmlstream.com/preview/unify/page_home4.html">Option 5: Home Sidebar</a></li>
                            <li><a href="page_home5.html" tppabs="http://htmlstream.com/preview/unify/page_home5.html">Option 6: Home Flatty</a></li>
                            <li><a href="page_home6.html" tppabs="http://htmlstream.com/preview/unify/page_home6.html">Option 7: Home Magazine</a></li>
                            <li><a href="page_home7.html" tppabs="http://htmlstream.com/preview/unify/page_home7.html">Option 8: Home Portfolio</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Pages
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="page_about.html" tppabs="http://htmlstream.com/preview/unify/page_about.html">About Us</a></li>
                            <li><a href="page_about1.html" tppabs="http://htmlstream.com/preview/unify/page_about1.html">About Us Option</a></li>
                            <li><a href="page_services.html" tppabs="http://htmlstream.com/preview/unify/page_services.html">Services</a></li>
                            <li><a href="page_services1.html" tppabs="http://htmlstream.com/preview/unify/page_services1.html">Services Option</a></li>
                            <li><a href="page_pricing.html" tppabs="http://htmlstream.com/preview/unify/page_pricing.html">Pricing Tables</a></li>
                            <li><a href="page_invoice.html" tppabs="http://htmlstream.com/preview/unify/page_invoice.html">Invoice Page</a></li>
                            <li><a href="page_meet_our_team.html" tppabs="http://htmlstream.com/preview/unify/page_meet_our_team.html">Meet Our Team</a></li>
                            <li><a href="page_coming_soon.html" tppabs="http://htmlstream.com/preview/unify/page_coming_soon.html">Coming Soon</a></li>
                            <li><a href="page_faq.html" tppabs="http://htmlstream.com/preview/unify/page_faq.html">FAQs Page</a></li>
                            <li><a href="page_search.html" tppabs="http://htmlstream.com/preview/unify/page_search.html">Funny Boxes</a></li>
                            <li><a href="page_gallery.html" tppabs="http://htmlstream.com/preview/unify/page_gallery.html">Gallery Page</a></li>
                            <li><a href="page_registration.html" tppabs="http://htmlstream.com/preview/unify/page_registration.html">Registration Page</a></li>
                            <li><a href="page_registration1.html" tppabs="http://htmlstream.com/preview/unify/page_registration1.html">Registration Option</a></li>
                            <li><a href="page_login.html" tppabs="http://htmlstream.com/preview/unify/page_login.html">Login Page</a></li>
                            <li><a href="page_login1.html" tppabs="http://htmlstream.com/preview/unify/page_login1.html">Login Option</a></li>
                            <li><a href="page_404_error.html" tppabs="http://htmlstream.com/preview/unify/page_404_error.html">404 Error</a></li>
                            <li><a href="page_404_error1.html" tppabs="http://htmlstream.com/preview/unify/page_404_error1.html">404 Error Option</a></li>
                            <li><a href="page_clients.html" tppabs="http://htmlstream.com/preview/unify/page_clients.html">Clients Page</a></li>
                            <li><a href="page_privacy.html" tppabs="http://htmlstream.com/preview/unify/page_privacy.html">Privacy Policy</a></li>
                            <li><a href="page_terms.html" tppabs="http://htmlstream.com/preview/unify/page_terms.html">Terms Of Service</a></li>
                            <li><a href="page_2_columns_left.html" tppabs="http://htmlstream.com/preview/unify/page_2_columns_left.html">2 Columns Page Left</a></li>
                            <li><a href="page_2_columns_right.html" tppabs="http://htmlstream.com/preview/unify/page_2_columns_right.html">2 Columns Page Right</a></li>
                            <li><a href="page_3_columns.html" tppabs="http://htmlstream.com/preview/unify/page_3_columns.html">3 Columns Page</a></li>
                        </ul>
                    </li>
                    <li class="dropdown active">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Features
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="feature_grid.html" tppabs="http://htmlstream.com/preview/unify/feature_grid.html">Grid Layout</a></li>
                            <li><a href="feature_boxes.html" tppabs="http://htmlstream.com/preview/unify/feature_boxes.html">Content Boxes</a></li>
                            <li><a href="feature_typography.html" tppabs="http://htmlstream.com/preview/unify/feature_typography.html">Typography</a></li>
                            <li><a href="feature_tagline_boxes.html" tppabs="http://htmlstream.com/preview/unify/feature_tagline_boxes.html">Tagline Boxes</a></li>
                            <li><a href="feature_buttons.html" tppabs="http://htmlstream.com/preview/unify/feature_buttons.html">Buttons</a></li>
                            <li><a href="feature_icons.html" tppabs="http://htmlstream.com/preview/unify/feature_icons.html">Icons</a></li>
                            <li><a href="feature_thumbails.html" tppabs="http://htmlstream.com/preview/unify/feature_thumbails.html">Thumbails</a></li>
                            <li class="active"><a href="feature_components.html" tppabs="http://htmlstream.com/preview/unify/feature_components.html">Components</a></li>
                            <li><a href="feature_accardion_and_tabs.html" tppabs="http://htmlstream.com/preview/unify/feature_accardion_and_tabs.html">Accardion and Tabs</a></li>
                            <li><a href="feature_navigations.html" tppabs="http://htmlstream.com/preview/unify/feature_navigations.html">Navigations</a></li>
                            <li><a href="feature_tables.html" tppabs="http://htmlstream.com/preview/unify/feature_tables.html">Tables</a></li>
                            <li><a href="feature_forms.html" tppabs="http://htmlstream.com/preview/unify/feature_forms.html">Forms</a></li>
                            <li><a href="feature_testimonials.html" tppabs="http://htmlstream.com/preview/unify/feature_testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Portfolio
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="portfolio_text_blocks.html" tppabs="http://htmlstream.com/preview/unify/portfolio_text_blocks.html">Portfolio Text Blocks</a></li>
                            <li><a href="portfolio_2_column.html" tppabs="http://htmlstream.com/preview/unify/portfolio_2_column.html">Portfolio 2 Columns</a></li>
                            <li><a href="portfolio_3_column.html" tppabs="http://htmlstream.com/preview/unify/portfolio_3_column.html">Portfolio 3 Columns</a></li>
                            <li><a href="portfolio_4_column.html" tppabs="http://htmlstream.com/preview/unify/portfolio_4_column.html">Portfolio 4 Columns</a></li>
                            <li><a href="portfolio_item.html" tppabs="http://htmlstream.com/preview/unify/portfolio_item.html">Portfolio Item Option 1</a></li>
                            <li><a href="portfolio_item1.html" tppabs="http://htmlstream.com/preview/unify/portfolio_item1.html">Portfolio Item Option 2</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Blog
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="blog_page.html" tppabs="http://htmlstream.com/preview/unify/blog_page.html">Blog Page</a></li>
                            <li><a href="blog_large.html" tppabs="http://htmlstream.com/preview/unify/blog_large.html">Blog Large</a></li>
                            <li><a href="blog_medium.html" tppabs="http://htmlstream.com/preview/unify/blog_medium.html">Blog Medium</a></li>
                            <li><a href="blog_full_width.html" tppabs="http://htmlstream.com/preview/unify/blog_full_width.html">Blog Full Width</a></li>
                            <li><a href="blog_left_sidebar.html" tppabs="http://htmlstream.com/preview/unify/blog_left_sidebar.html">Blog Left Sidebar</a></li>
                            <li><a href="blog_right_sidebar.html" tppabs="http://htmlstream.com/preview/unify/blog_right_sidebar.html">Blog Right Sidebar</a></li>
                            <li><a href="blog_item_option1.html" tppabs="http://htmlstream.com/preview/unify/blog_item_option1.html">Blog Item Option 1</a></li>
                            <li><a href="blog_item_option2.html" tppabs="http://htmlstream.com/preview/unify/blog_item_option2.html">Blog Item Option 2</a></li>
                        </ul>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false">
                            Contacts
                            <i class="icon-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="page_contact1.html" tppabs="http://htmlstream.com/preview/unify/page_contact1.html">Contacts Default</a></li>
                            <li><a href="page_contact2.html" tppabs="http://htmlstream.com/preview/unify/page_contact2.html">Contacts Option 1</a></li>
                            <li><a href="page_contact3.html" tppabs="http://htmlstream.com/preview/unify/page_contact3.html">Contacts Option 2</a></li>
                        </ul>
                    </li>                    
                    <li class="hidden-sm"><a class="search"><i class="icon-search search-btn"></i></a></li>
                </ul>
                <div class="search-open">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button class="btn-u" type="button">Go</button>
                        </span>
                    </div><!-- /input-group -->
                </div>                
            </div><!-- /navbar-collapse -->
        </div>    
    </div>    
</div><!--/header-->
<!--=== End Header ===-->    

<!--=== Breadcrumbs ===-->
<div class="breadcrumbs margin-bottom-40">
    <div class="container">
        <h1 class="pull-left">Components</h1>
        <ul class="pull-right breadcrumb">
            <li><a href="index.html" tppabs="http://htmlstream.com/preview/unify/index.html">Home</a></li>
            <li><a href="">Features</a></li>
            <li class="active">Components</li>
        </ul>
    </div>
</div><!--/breadcrumbs-->
<!--=== End Breadcrumbs ===-->

<!--=== Content Part ===-->
<div class="container">
    <div class="row">
        <!--Begin Sidebar Menu-->
        <div class="col-md-3">            
            <ul class="list-group sidebar-nav-v1">
                <li class="list-group-item"><a href="feature_grid.html" tppabs="http://htmlstream.com/preview/unify/feature_grid.html">Grid Layout</a></li>
                <li class="list-group-item">
                    <span class="badge badge-green">New</span>                    
                    <a href="feature_boxes.html" tppabs="http://htmlstream.com/preview/unify/feature_boxes.html">Content Boxes</a>
                </li>
                <li class="list-group-item"><a href="feature_typography.html" tppabs="http://htmlstream.com/preview/unify/feature_typography.html">Typography</a></li>
                <li class="list-group-item">
                    <span class="badge badge-red">New</span>                    
                    <a href="feature_tagline_boxes.html" tppabs="http://htmlstream.com/preview/unify/feature_tagline_boxes.html">Tagline Boxes</a>
                </li>
                <li class="list-group-item"><a href="feature_buttons.html" tppabs="http://htmlstream.com/preview/unify/feature_buttons.html">Buttons</a></li>
                <li class="list-group-item">
                    <span class="badge">New</span>                                        
                    <a href="feature_icons.html" tppabs="http://htmlstream.com/preview/unify/feature_icons.html">Icons</a>
                </li>
                <li class="list-group-item"><a href="feature_thumbails.html" tppabs="http://htmlstream.com/preview/unify/feature_thumbails.html">Thumbails</a></li>
                <li class="list-group-item active"><a href="feature_components.html" tppabs="http://htmlstream.com/preview/unify/feature_components.html">Components</a></li>
                <li class="list-group-item">
                    <span class="badge badge-blue">New</span>                    
                    <a href="feature_accardion_and_tabs.html" tppabs="http://htmlstream.com/preview/unify/feature_accardion_and_tabs.html">Accardion and Tabs</a>
                </li>
                <li class="list-group-item"><a href="feature_navigations.html" tppabs="http://htmlstream.com/preview/unify/feature_navigations.html">Navigations</a></li>
                <li class="list-group-item"><a href="feature_tables.html" tppabs="http://htmlstream.com/preview/unify/feature_tables.html">Tables</a></li>
                <li class="list-group-item"><a href="feature_forms.html" tppabs="http://htmlstream.com/preview/unify/feature_forms.html">Forms</a></li>
                <li class="list-group-item">
                    <span class="badge badge-sea">New</span>                    
                    <a href="feature_testimonials.html" tppabs="http://htmlstream.com/preview/unify/feature_testimonials.html">Testimonials</a>
                </li>
            </ul>
        </div>
        <!--End Sidebar Menu-->

        <!--Begin Content-->
        <div class="col-md-9">
            <!--Alert Messages-->
            <div class="alert alert-warning fade in">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Warning!</strong> Best check yo self, you're not looking too good.
            </div>
            <div class="alert alert-danger fade in">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Oh snap!</strong> Change a few things up and try submitting again.
            </div>                
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Well done!</strong> Change a few things up and try submitting again.
            </div>                
            <div class="alert alert-info">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Heads up!</strong> Change a few things up and try submitting again.
            </div>                
            <!--End Alert Messages-->

            <div class="clearfix margin-bottom-20"></div>

            <!--Alert Block Messages-->
            <div class="headline"><h2>Alerts Blocks</h2></div>
            <div class="alert alert-block alert-danger fade in">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                <h4>Oh snap! You got an error!</h4>
                <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
                <p>
                    <a class="btn-u btn-u-red" href="#">Take this action</a> <a class="btn-u btn-u-sea" href="#">Or do this</a>
                </p>
            </div>
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Well done!</h4>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.
            </div>                
            <!--End Alert Block Messages-->

            <div class="clearfix margin-bottom-20"></div>

            <div class="headline"><h2>Panels</h2></div>
            <p>By default, all the <code>.panel</code> does is apply some basic border and padding to contain some content. Easily add a heading container to your panel with <code>.panel-heading</code>. You may also include any <code>h1- h6</code> with a <code>.panel-title</code> class to add a pre-styled heading.</p><br>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Grey Panels-->            
                    <div class="panel panel-grey">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Grey Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Grey Panels-->            
                </div>
                <div class="col-md-6">
                    <!--Red Panels-->            
                    <div class="panel panel-red">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Grey Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Red Panels-->            
                </div>
            </div>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Blue Panels-->            
                    <div class="panel panel-blue">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Blue Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Blue Panels-->            
                </div>
                <div class="col-md-6">
                    <!--Sea Panels-->            
                    <div class="panel panel-sea">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Sea Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Sea Panels-->            
                </div>
            </div>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Green Panels-->            
                    <div class="panel panel-green">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Green Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Green Panels-->            
                </div>            
                <div class="col-md-6">
                    <!--Orange Panels-->            
                    <div class="panel panel-orange">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Orange Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Accusamus et iusto odio</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Orange Panels-->            
                </div>
            </div>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Yellow Panels-->            
                    <div class="panel panel-yellow">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Yellow Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>At vero eos et accusamus et</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Yellow Panels-->            
                </div>            
                <div class="col-md-6">
                    <!--Default Panels-->            
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Default Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Default Bootstrap Panel</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Default Panels-->            
                </div>
            </div>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Info Panels-->            
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Info Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Default Bootstrap Panel</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Info Panels-->            
                </div>            
                <div class="col-md-6">
                    <!--Success Panels-->            
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Success Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Default Bootstrap Panel</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Success Panels-->            
                </div>
            </div>

            <div class="row margin-bottom-20">
                <div class="col-md-6">
                    <!--Warning Panels-->            
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Warning Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Default Bootstrap Panel</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Warning Panels-->            
                </div>            
                <div class="col-md-6">
                    <!--Danger Panels-->            
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="icon-tasks"></i> Danger Panel</h3>
                        </div>
                        <div class="panel-body">
                            <h4>Default Bootstrap Panel</h4>   
                            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
                        </div>
                    </div>
                    <!--End Danger Panels-->            
                </div>
            </div>

            <!--Labels & Progress Bars-->
            <div class="row margin-bottom-30">
                <div class="col-md-6">
                    <div class="headline"><h2>Labels </h2></div>
                    <p>
                        <span class="label label-default">1</span>
                        <span class="label label-danger">2</span>
                        <span class="label label-info">3</span>
                        <span class="label label-warning">4</span>
                        <span class="label label-success">5</span>
                    </p>
                    <p>
                        <span class="label label-default">Default</span>
                        <span class="label label-success">Success</span>
                        <span class="label label-warning">Warning</span>
                        <span class="label label-danger">Important</span>
                        <span class="label label-info">Info</span>
                    </p>

                    <p>
                        <span class="label label-warning"><i class="icon-bookmark"></i> At vero eos et sunt</span>
                        <span class="label label-info"><i class="icon-asterisk"></i> Similique atin culpa</span>
                        <span class="label label-success"><i class="icon-flag"></i> Voluptatum deleniti</span>
                    </p>
                    <p>
                        <span class="label label-danger"><i class="icon-cloud"></i> At vero eos et sunt</span>
                        <span class="label label-success"><i class="icon-coffee"></i> Similique atin culpa</span>
                        <span class="label label-default"><i class="icon-envelope-alt"></i> Icon-envelope-alt</span>
                    </p>

                    <p class="muted">
                        <span class="label label-default"><i class="icon-comments"></i></span> 
                        <strong>dignissimos et ducimus similique sunt</strong>
                    </p>                
                    <p class="text-success">
                        <span class="label label-success"><i class="icon-bell-alt"></i></span> 
                        <strong>Similique sunt dignissimos et ducimus</strong>
                    </p>
                    <p class="text-warning">
                        <span class="label label-warning"><i class="icon-ok"></i></span> 
                        <strong>Similique sunt in culpa qui mollitia</strong>
                    </p>
                    <p>
                        <span class="label label-danger"><i class="icon-leaf"></i></span> 
                        <strong>At vero eos eto roficia qui </strong>
                    </p>
                    <p class="text-info">
                        <span class="label label-info"><i class="icon-volume-up"></i></span> 
                        <strong>Officia qui deserunt in culpa qui</strong>
                    </p>
                </div><!--/col-md-6-->
                
                <div class="col-md-6">
                    <div class="headline"><h2>Progress Bars</h2></div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                        <span class="sr-only">20% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                        <span class="sr-only">60% Complete (warning)</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span class="sr-only">80% Complete</span>
                        </div>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" style="width: 40%">
                            <span class="sr-only">40% Complete (success)</span>
                        </div>
                        <div class="progress-bar progress-bar-warning" style="width: 30%">
                            <span class="sr-only">30% Complete (warning)</span>
                        </div>
                        <div class="progress-bar progress-bar-danger" style="width: 20%">
                            <span class="sr-only">20% Complete (danger)</span>
                        </div>
                    </div>
                    <div class="progress progress-striped active">
                        <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
                        <span class="sr-only">45% Complete</span>
                        </div>
                    </div>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span class="sr-only">80% Complete (danger)</span>
                        </div>
                    </div>
                    <div class="progress progress-striped">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span class="sr-only">40% Complete (success)</span>
                        </div>
                    </div>                                                                                
                </div><!--/col-md-6-->
            </div><!--/row-->
            <!--End Labels & Progress Bars-->

            <!--Progress Bars (full width)-->            
            <div class="headline"><h2>Progress Bars (full width)</h2></div>
            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                </div>
            </div>
            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                    <span class="sr-only">20% Complete</span>
                </div>
            </div>
            <div class="progress progress-striped">
                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                    <span class="sr-only">60% Complete (warning)</span>
                </div>
            </div>
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                    <span class="sr-only">80% Complete (danger)</span>
                </div>
            </div>
            <!--End Progress Bars (full width)-->            
        </div>
        <!--End Content-->
    </div>          
</div><!--/container-->     
<!--=== End Content Part ===-->

<!--=== Footer ===-->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-4 md-margin-bottom-40">
                <!-- About -->
                <div class="headline"><h2>About</h2></div>  
                <p class="margin-bottom-25 md-margin-bottom-40">Unify is an incredibly beautiful responsive Bootstrap Template for corporate and creative professionals.</p>    

                <!-- Monthly Newsletter -->
                <div class="headline"><h2>Monthly Newsletter</h2></div> 
                <p>Subscribe to our newsletter and stay up to date with the latest news and deals!</p>
                <form class="footer-subsribe">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Email Address">                            
                        <span class="input-group-btn">
                            <button class="btn-u" type="button">Subscribe</button>
                        </span>
                    </div><!-- /input-group -->                    
                </form>                         
            </div><!--/col-md-4-->  
            
            <div class="col-md-4 md-margin-bottom-40">
                <div class="posts">
                    <div class="headline"><h2>Recent Blog Entries</h2></div>
                    <dl class="dl-horizontal">
                        <dt><a href="#"><img src="assets/img/sliders/elastislide/6.jpg" tppabs="http://htmlstream.com/preview/unify/assets/img/sliders/elastislide/6.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                    <dl class="dl-horizontal">
                    <dt><a href="#"><img src="assets/img/sliders/elastislide/10.jpg" tppabs="http://htmlstream.com/preview/unify/assets/img/sliders/elastislide/10.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                    <dl class="dl-horizontal">
                    <dt><a href="#"><img src="assets/img/sliders/elastislide/11.jpg" tppabs="http://htmlstream.com/preview/unify/assets/img/sliders/elastislide/11.jpg" alt="" /></a></dt>
                        <dd>
                            <p><a href="#">Anim moon officia Unify is an incredibly beautiful responsive Bootstrap Template</a></p> 
                        </dd>
                    </dl>
                </div>
            </div><!--/col-md-4-->

            <div class="col-md-4">
                <!-- Monthly Newsletter -->
                <div class="headline"><h2>Contact Us</h2></div> 
                <address class="md-margin-bottom-40">
                    25, Lorem Lis Street, Orange <br />
                    California, US <br />
                    Phone: 800 123 3456 <br />
                    Fax: 800 123 3456 <br />
                    Email: <a href="mailto:info@anybiz.com" class="">info@anybiz.com</a>
                </address>

                <!-- Stay Connected -->
                <div class="headline"><h2>Stay Connected</h2></div> 
                <ul class="social-icons">
                    <li><a href="#" data-original-title="Feed" class="social_rss"></a></li>
                    <li><a href="#" data-original-title="Facebook" class="social_facebook"></a></li>
                    <li><a href="#" data-original-title="Twitter" class="social_twitter"></a></li>
                    <li><a href="#" data-original-title="Goole Plus" class="social_googleplus"></a></li>
                    <li><a href="#" data-original-title="Pinterest" class="social_pintrest"></a></li>
                    <li><a href="#" data-original-title="Linkedin" class="social_linkedin"></a></li>
                    <li><a href="#" data-original-title="Vimeo" class="social_vimeo"></a></li>
                </ul>
            </div><!--/col-md-4-->
        </div><!--/row-->   
    </div><!--/container--> 
</div><!--/footer-->    
<!--=== End Footer ===-->

<!--=== Copyright ===-->
<div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-md-6">                      
                <p class="copyright-space">
                    2013 &copy; Unify. ALL Rights Reserved. 
                    <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a>
                </p>
            </div>
            <div class="col-md-6">  
                <a href="index.html" tppabs="http://htmlstream.com/preview/unify/index.html">
                    <img id="logo-footer" src="assets/img/logo2-default.png" tppabs="http://htmlstream.com/preview/unify/assets/img/logo2-default.png" class="pull-right" alt="" />
                </a>
            </div>
        </div><!--/row-->
    </div><!--/container--> 
</div><!--/copyright--> 
<!--=== End Copyright ===-->

<!-- JS Global Compulsory -->           
<script type="text/javascript" src="assets/plugins/jquery-1.10.2.min.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-migrate-1.2.1.min.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="assets/plugins/hover-dropdown.min.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/hover-dropdown.min.js"></script> 
<script type="text/javascript" src="assets/plugins/back-to-top.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/back-to-top.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="assets/js/app.js" tppabs="http://htmlstream.com/preview/unify/assets/js/app.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        App.init();
    });
</script>
<!--[if lt IE 9]>
    <script src="assets/plugins/respond.js" tppabs="http://htmlstream.com/preview/unify/assets/plugins/respond.js"></script>
<![endif]-->
<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-29166220-1']);
  _gaq.push(['_setDomainName', 'http://htmlstream.com/preview/unify/htmlstream.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www/') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

</body>
</html> 